<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/tools.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            background-image: url(../images/1408bbb85c5d1a3d760080c2c903103a.gif);
            background-size: 600px 600px;
        }

        #box {
            width: 600px;
            height: 600px;
            border: 1px solid red;
            position: relative;
            margin: 0 auto;
        }

        #box li {
            position: absolute;
            border: 1px solid black;
            box-sizing: border-box;
        }

     
    </style>
</head>

<body>
    <ul id="box">

    </ul>
    行:<input type="text" id="rowCount">
    列:<input type="text" id="colCount">
    <input type="button" value="点击生成" id="button">
    <script>
        var lis
        var rowCount
        var colCount
        var cellHeight
        var cellWidth
        var button = document.getElementById('button') 
        var ulDom = document.getElementById('box')
        button.onclick = function () {
            rowCount = parseInt(document.getElementById('rowCount').value)
            colCount = parseInt(document.getElementById('colCount').value)
            cellHeight = 600/ rowCount
            cellWidth = 600/ colCount
            initUI()
            lis = document.getElementsByTagName('li')
            lis = Array.from(lis)
            lis.forEach((li, index) => {

                li.setAttribute('index', index)
                dragBack(li)
                //源和目标
                //1.源,按下鼠标确定
                li.onmousedown = function () {
                    this.style.zIndex = 999
                    sourceIndex = this.getAttribute('index')
                }
                //2.目标 :松开鼠标
                ulDom.onmousemove = function (event) {
                    var e = event || window.event
                    var left1 = e.pageX - ulDom.offsetLeft
                    var top1 = e.pageY - ulDom.offsetTop
                    var row = parseInt(top1 / cellHeight)     //写死的数据 200是li的大小
                    var col = parseInt(left1 / cellWidth)
                    targetIndex = row * colCount + col         //3是一行有三个列(单元格)
                }
            });
            document.onmouseup = function () {
                exchange(sourceIndex, targetIndex)         //交换
            }
        }

       

        function initUI() {
            var htmlStr = ''
            for (var i = 0; i < rowCount; i++) {
                for (var j = 0; j < colCount; j++) {
                    htmlStr += `
                    <li style="
                                    width: ${cellWidth}px;
                                    height: ${cellHeight}px;
                                    left:${j * cellWidth}px;
                                    top: ${i * cellHeight}px;
                                    background-position: -${j * cellWidth}px -${i * cellHeight}px;
                         "></li>
                    `
                }
            }
            ulDom.innerHTML = htmlStr
        }


        var sourceIndex = -1 //源下标
        var targetIndex = -1
        
     

        function exchange(sourceIndex, targetIndex) {
            if (sourceIndex == -1 || targetIndex == -1) {
                return;
            }
            //交换两个元素的background-position
            var temp = getStyle(lis[sourceIndex], 'backgroundPosition')
            lis[sourceIndex].style.backgroundPosition = getStyle(lis[targetIndex], 'backgroundPosition')
            lis[targetIndex].style.backgroundPosition = temp;
            lis[sourceIndex].style.zIndex = 0;
            // 复位:
            lis[sourceIndex].style.left = (sourceIndex % colCount) * cellWidth + "px";
            lis[sourceIndex].style.top = (parseInt(sourceIndex / colCount)) * cellHeight + "px";
        }
    </script>
</body>

</html>